<template>
    <div class="chat">
        <div class="chat-view">
            <div class="row-msg" :class="{'row-msg-other':!item.self}" :key="index" v-for="(item,index) in arrMsg">
                <div class="avatar">
                    <img :src="item.avatar">
                </div>
                <div class="msg">
                    <p>{{item.msg}}</p>
                </div>
            </div>
        </div>
        <div class="chat-bar">
            <div class="chat-bar-issue">
                <ul>
                    <li>
                        <span>运费</span>
                    </li>
                    <li>
                        <span>物流查询</span>
                    </li>
                    <li>
                        <span>商品咨询</span>
                    </li>
                </ul>
            </div>
            <div class="chat-bar-input">
                <div class="input-emotion">
                    <i class="iconfont">&#xe652;</i>
                </div>
                <div class="input-text">
                    <input type="text" v-model="msg"/>
                </div>
                <div class="input-more" v-if="!sendVisibel">
                    <i class="iconfont">&#xe627;</i>
                </div>
                <div class="input-send" v-if="sendVisibel">
                    <input type="button" value="发送"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                sendVisibel: true,
                msg: '',
                arrMsg: [
                    {
                        self: true,
                        uid: 1,
                        avatar: 'https://cn.vuejs.org/images/logo.png',
                        msg: '你好，这辆劳斯莱斯可以退货吗,开着开着轮子就掉了'
                    },
                    {
                        self: true,
                        uid: 2,
                        avatar: 'https://cn.vuejs.org/images/logo.png',
                        msg: '在吗？有客服吗'
                    },
                    {
                        self: false,
                        uid: 1,
                        avatar: 'https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/299c55e31d7f50ae4dc85faa90d6f445_121_121.jpg',
                        msg: '在的！亲'
                    },
                    {
                        self: true,
                        uid: 1,
                        avatar: 'https://cn.vuejs.org/images/logo.png',
                        msg: '卧槽，卖了东西就不理人了？'
                    }
                ]
            }
        }
    }
</script>
<style lang="less" scoped>
    .chat {
        .chat-view {
            position: absolute;
            top: 52px;
            bottom: 96px;
            right: 0px;
            left: 0px;
            overflow-x: hidden;
            overflow-y: auto;
            .row-msg {
                overflow: hidden;
                font-size: 15px;
                margin-top: 15px;
                .msg {
                    float: right;
                    box-sizing: border-box;
                    width: 50%;
                    padding-right: 10px;
                    text-align: right;
                    p {
                        position: relative;
                        display: inline-block;
                        box-sizing: border-box;
                        padding: 10px 5px;
                        min-height: 45px;
                        line-height: 25px;
                        border-radius: 5px;
                        word-break: break-all;
                        text-align: left;
                        background: #2d8cf0;
                        color: white;
                        &::after {
                            position: absolute;
                            display: block;
                            content: '';
                            top: 22px;
                            right: 0px;
                            transform: translate(95%, -50%);
                            border-top: 10px solid transparent;
                            border-left: 10px solid #2d8cf0;
                            border-bottom: 10px solid transparent;
                        }
                    }
                }
                .avatar {
                    float: right;
                    width: 60px;
                    img {
                        display: block;
                        width: 45px;
                        height: 45px;
                        margin: 0px auto;
                    }
                }
            }
            .row-msg-other {
                .msg {
                    float: left;
                    text-align: left;
                    padding: 0px;
                    padding-left: 10px;
                    p {
                        &::after {
                            display: none;
                        }
                        &::before {
                            position: absolute;
                            display: block;
                            content: '';
                            top: 22px;
                            left: 0px;
                            transform: translate(-95%, -50%);
                            border-top: 10px solid transparent;
                            border-right: 10px solid #2d8cf0;
                            border-bottom: 10px solid transparent;
                        }
                    }
                }
                .avatar {
                    float: left;
                }
            }
        }
        .chat-bar {
            position: absolute;
            bottom: 0px;
            right: 0px;
            left: 0px;
            padding: 10px 5px;
            background: white;
            .chat-bar-issue {
                box-sizing: border-box;
                width: 100%;
                overflow-y: hidden;
                overflow-x: auto;
                padding-bottom: 5px;
                ul {
                    display: flex;
                    flex-wrap: nowrap;
                    width: auto;
                    list-style: none;
                    li {
                        flex-grow: 0;
                        span {
                            height: 18px;
                            font-size: 14px;
                            line-height: 18px;
                            padding: 0px 5px;
                            border: 1px solid #dddee1;
                            border-radius: 5px;
                        }
                        &:not(:last-child) {
                            padding-right: 10px;
                        }
                    }
                }
            }
            .chat-bar-input {
                display: flex;
                height: 35px;
                .input-emotion {
                    display: flex;
                    flex-basis: 15%;
                    align-items: center;
                    justify-content: center;
                    i {
                        font-size: 25px;
                    }
                }
                .input-text {
                    flex: 1;
                    border-bottom: 1px solid #dddee1;
                    input {
                        display: block;
                        width: 100%;
                        height: 34px;
                        border: none;
                        outline: none;
                    }
                }
                .input-more {
                    display: flex;
                    flex-basis: 20%;
                    align-items: center;
                    justify-content: center;
                }
                .input-send {
                    display: flex;
                    box-sizing: border-box;
                    flex-basis: 20%;
                    align-items: center;
                    justify-content: center;
                    padding-left: 10px;
                    input {
                        flex: 1;
                        height: 35px;
                        border: none;
                        outline: none;
                        background: #de181b;
                        color: white;
                    }
                }
            }
        }
    }
</style>